<script setup lang="ts">
// 组件属性定义
defineProps(['show', 'activityData'])

// 组件事件定义
const emit = defineEmits(['close', 'next'])

/**
 * 处理兑换按钮点击事件
 * 触发下一步操作
 */
function handleRedeem() {
  emit('next')
}
</script>

<template>
  <!-- 第二步对话框：中奖后引导充值 -->
  <van-dialog :show="show" title="" destroy-on-close class-name="custom-dialog activity-dialog"
    overlay-class="activity-dialog-overlay" teleport="body" :show-confirm-button="false" :show-cancel-button="false"
    @cancel="emit('close')">
    <div class="container">
      <!-- 主要内容区域 -->
      <div class="content">
        <!-- 关闭按钮 -->
        <NuxtImg class="close_img" src="/images/activity/cp/close.png" @click="emit('close')" />

        <!-- 顶部提示文字：显示中奖金额 -->
        <div class="top_text">
          {{ $t('activity.cp.seconed_top_text_1') }}
          <span>&nbsp;{{ apo.utils.formateAmountWithSymbol(activityData.reward || 0) }}&nbsp;</span>
          {{ $t('activity.cp.seconed_top_text_3') }}
        </div>

        <!-- 标题图片 -->
        <div class="title_img">
          <img src="/images/activity/cp/Title_03.png">
        </div>

        <!-- 兑换按钮区域 -->
        <div class="re_btn">
          <!-- 无门槛标签 -->
          <div class="sem">
            <svg xmlns="http://www.w3.org/2000/svg" width="128" height="40" viewBox="0 0 128 40" fill="none">
              <path
                d="M116 0C122.627 0 128 5.37258 128 12V22C128 28.6274 122.627 34 116 34H29.582C28.6521 36.0121 28.1641 38.3998 28 40C26.5232 38.8001 25.4767 36.3076 24.8115 34H12C5.37258 34 1.61069e-07 28.6274 0 22V12C0 5.37258 5.37258 0 12 0H116Z"
                fill="url(#paint0_linear_1162_305)" />
              <defs>
                <linearGradient id="paint0_linear_1162_305" x1="10" y1="20.5" x2="94" y2="20.5"
                  gradientUnits="userSpaceOnUse">
                  <stop stop-color="#DA05F2" />
                  <stop offset="1" stop-color="#FD5B0C" />
                </linearGradient>
              </defs>
            </svg>
            <span>{{ $t('activity.cp.no_bar') }}</span>
          </div>

          <!-- 兑换按钮 -->
          <div v-click-move class="btn" @click="handleRedeem">
            <span>{{ $t('activity.cp.redeem_btn') }}</span>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<style scoped lang="scss">
/* 第二步对话框样式 */
.container {
  position: relative;

  /* CSS 变量定义 */
  --bg-image: url(/images/activity/cp/bg3.png);
  --btn3-image: url(/images/activity/cp/btn3.png);

  .content {
    position: relative;
    width: 8.6rem;
    height: 14.7rem;
    padding-top: 5rem;
    margin: 0 auto;
    background: var(--bg-image) no-repeat;
    background-size: 100% 100%;
    will-change: transform;

    /* 关闭按钮样式 */
    .close_img {
      position: absolute;
      top: 3.8rem;
      right: -0.5rem;
      width: 1.2rem;
      height: 1.2rem;
    }

    /* 标题图片样式 */
    .title_img {
      text-align: center;
      margin-top: 1rem;
    }

    /* 顶部文字样式 */
    .top_text {
      margin: 0.2rem auto 0;
      width: 8.24rem;
      font-size: 0.38rem;
      color: #fff;
      text-align: center;
      line-height: 0.48rem;
      padding: 0 0.4rem;

      span {
        color: #FFE100;
      }
    }

    /* 兑换按钮区域样式 */
    .re_btn {
      position: relative;
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 0.2rem;

      /* 无门槛标签样式 */
      .sem {
        position: absolute;
        top: -0.5rem;
        right: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.46rem;
        background-size: 100% 100%;
        font-weight: 800;
        font-size: 0.34rem;
        color: #fff;

        svg {
          width: 100%;
          height: 100%;
        }

        span {
          position: absolute;
          top: 0.14rem;
        }
      }

      /* 兑换按钮样式 */
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5.59rem;
        height: 2rem;
        background: var(--btn3-image) no-repeat;
        background-size: 100% 100%;
        font-weight: 800;
        font-size: 0.54rem;
        color: #3B1D33;

        span {
          transform: translateY(-0.08rem);
        }
      }
    }
  }
}

/* 光效旋转动画关键帧 */
@keyframes guang_spin {
  0% {
    transform: translate(-50%) rotate(0);
  }

  100% {
    transform: translate(-50%) rotate(360deg);
  }
}
</style>
